vue
<template>
  <div class="container">
    <el-scrollbar class="user">
      <div class="api-key">
        <!-- 使用 $t 函数获取翻译后的文本 -->
        <div class="label-out" style="margin-bottom: 10px;">{{ $t('企业管理') }}</div>
        <el-button type="primary" plain :icon="Plus" style="margin-bottom: 20px" @click="addCompany">{{ $t('新增') }}</el-button>
        <el-button type="primary" plain :icon="Delete" style="margin-bottom: 20px" @click="deleteSome">{{ $t('删除') }}</el-button>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <!-- 表头标签使用 $t 函数 -->
          <el-table-column :label="$t('公司名称')">
            <template #default="scope">
              <div style="display: flex; align-items: center;">
                <!-- 企业头像 -->
                <img :src="scope.row.logo" class="logo" />
                <!-- 企业名称 -->
                <span>{{ scope.row.companyName }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 表头标签使用 $t 函数 -->
          <el-table-column property="aiPlatformLabel" :label="$t('平台')" />
          <!-- 表头标签使用 $t 函数 -->
          <el-table-column property="createDate" :label="$t('创建时间')" />
          <!-- 表头标签使用 $t 函数 -->
          <el-table-column :label="$t('操作')" width="150">
            <template #default="scope">
              <div class="actions">
                <span class="iconfont icon-bianji" @click="editCompany(scope.row.id)"></span>
                <span class="iconfont icon-shanchu" @click="deleteItem(scope.row.id)"></span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" v-if="total > 0">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                         :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                         layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" />
          <!-- 分页总数提示使用 $t 函数 -->
          <span class="total">{{ $t('共') }}{{ total }}{{ $t('条') }}</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, Delete } from '@element-plus/icons-vue';
import { companyPage, deleteCompany } from '@/api/index';
export default {
  name: 'User',
  props: {},
  data() {
    return {
      Plus,
      Delete,
      total: null,
      currentPage: 1,
      pageSize: 20,
      size: 'default',
      disabled: false,
      background: true,
      tableData: [],
      selectedItems: []
    };
  },
  methods: {
    editCompany(id){
      this.$router.push({
        name: 'AddCompany',
        query: {
          id
        }
      })
    },
    addCompany(){
      this.$router.push({
        name: 'AddCompany'
      })
    },
    handleSelectionChange(selectedItems){
      this.selectedItems = selectedItems;
    },
    // 获取公司列表数据
    async fetchData() {
      const params = {
        page: this.currentPage,
        count: this.pageSize,
      };
      try {
        const { data } = await companyPage({ ...params }); // 使用封装的 API 请求方法
        if (data.code === 0) {
          this.tableData = data.data.records; // 更新表格数据
          this.total = +data.data.total; // 更新总数据条数
          this.pageSize = +data.data.size; // 设置每页条数
        }
      } catch (error) {
        console.log(this.$t('获取数据出错'), error);
      }
    },
    deleteItem(id) {
      ElMessageBox.confirm(
          this.$t('删除该企业后不能恢复，确定要删除吗？'),
          this.$t('删除确认'),
          {
            confirmButtonText: this.$t('删除'),
            cancelButtonText: this.$t('取消'),
            type: 'warning',
          },
      )
          .then(async () => {
            try {
              const { data } = await deleteCompany([id]); // 使用数组传递单个 ID
              if (data.code === 0) {
                ElMessage({
                  type: 'success',
                  message: this.$t('删除成功'),
                });
                this.fetchData(); // 删除后刷新数据
              } else {
                ElMessage({
                  type: 'error',
                  message: data.message || this.$t('删除失败，请重新操作'),
                });
              }
            } catch (error) {
              console.log(error);
              ElMessage({
                type: 'error',
                message: this.$t('删除请求失败，请稍后再试'),
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: this.$t('取消删除'),
            });
          });
    },
    deleteSome() {
      const selectedIds = this.selectedItems.map(
          (item) => item.id,
      );

      if (selectedIds.length === 0) {
        ElMessage({
          type: 'warning',
          message: this.$t('请选择要删除的企业！'),
        });
        return;
      }

      ElMessageBox.confirm(
          this.$t('已选择') + ' ' + selectedIds.length + ' ' + this.$t('条企业数据，删除该企业后不能恢复，确定要删除吗？'),
          this.$t('删除确认'),
          {
            confirmButtonText: this.$t('删除'),
            cancelButtonText: this.$t('取消'),
            type: 'warning',
          },
      )
          .then(async () => {
            try {
              const { data } = await deleteCompany(selectedIds); // 使用数组传递多个 ID
              if (data.code === 0) {
                ElMessage({
                  type: 'success',
                  message: this.$t('删除成功'),
                });
                this.fetchData(); // 删除后刷新数据
              } else {
                ElMessage({
                  type: 'error',
                  message: data.message || this.$t('删除失败，请重新操作'),
                });
              }
            } catch (error) {
              console.log(error);
              ElMessage({
                type: 'error',
                message: this.$t('删除请求失败，请稍后再试'),
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: this.$t('取消删除'),
            });
          });
    },
    // 翻页处理
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData(); // 翻页时重新请求数据
    },
    // 每页显示条数变化处理
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData(); // 每页条数变化时重新请求数据
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 60px);
  background: #181818;
  box-shadow: 12px 12px 30px 0px rgba(40, 58, 44, 0.08);
  border-radius: 32px 32px 32px 32px;
  overflow: hidden;
  .logo{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
  }

  .api-key {
    .el-button {
      transition: 0.3s ease;
      background: #303f2e;
      border-color: $color;

      &:hover {
        background-color: $color;
        border-color: $color;
      }
    }
  }

  .user {
    padding: 20px 25px;

    .divider {
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #3B3B3B;
      margin-bottom: 26px;
    }

    .actions {
      .iconfont {
        font-size: 20px;
        transition: 0.3s ease;
        margin-right: 26px;
        cursor: pointer;

        &:hover {
          color: $color;
        }
      }
    }

    .label-out {
      font-weight: 400;
      font-size: 24px;
      color: #ffffff;
      line-height: 60px;
    }


    .form {
      display: flex;
      align-items: center;
      margin-bottom: 30px;

      .label {
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        width: 200px;

        .require {
          color: #FF5C5C;
          margin-right: 5px;
        }
      }
    }

    .progress {
      margin-left: 38px;

      .label {
        display: flex;
        align-items: center;

        .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #D8D8D8;
          border: 2px solid #D8D8D8;
          margin-right: 25px;
          position: relative;

          &::after {
            position: absolute;
            display: block;
            content: '';
            height: 60px;
            width: 1px;
            border-left: 1px dashed #D8D8D8;
            top: 15px;
            left: 6px;
          }

          &.no-line {
            &::after {
              display: none;
            }
          }

          &.active {
            background: #000000;
            border: 2px solid $color;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.user-uploader {

  .avatar-uploader,
  .avatar {
    width: 107px;
    height: 107px;
    background: #404040;
    border-radius: 50%;
  }
}

.user-input {
  .el-input__wrapper {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .el-input {
    width: 413px;

    .el-input__inner {
      width: 413px;
      box-shadow: none;
      height: 46px;
      background: #000000;
      color: #fff;
      padding: 8px 16px;
    }
  }
}
</style>
